<template>
  <div class="order_info_page">
    <div class="order_info">
      <p class="detail_title">订单信息</p>
      <ul class="order_list">
        <li v-for="(item, index) in orderInfo" :key="index">
          <p>{{ item.name }}:</p>
          <p>{{ item.value }}</p>
        </li>
      </ul>
    </div>

    <div class="after_sale_shop">
      <p class="detail_title">售后商品</p>
      <div v-for="(item, index) in shopList" :key="index" class="goods_list">
        <div class="good_details">
          <ul>
            <li>
              <img :src="item.image" />
            </li>
            <li>
              <p>{{ item.productName }}</p>
              <p>{{ item.skuValue }}</p>
              <p>SKU: {{ item.skuId }}</p>
            </li>
            <li>
              <p>¥{{ (item.productPrice && item.number) ? (parseFloat(item.productPrice.toString()) * item.number) : 0 }}</p>
              <p>¥{{ (item.productPrice && item.number) ? `${ item.productPrice }*${ item.number }` : '0*0' }}</p>
            </li>
            <li>¥{{ item.total }}</li>
          </ul>
        </div>
      </div>
      <div class="total">
        <ul>
          <li></li>
          <li></li>
          <li>退款总金额</li>
          <li>¥{{ total }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

const props = defineProps<{
  orderInfoData: Array<{ name: string; value: string; type: number | string; field: string }>
  shopListData: Array<{ 
    image?: string
    productName?: string
    skuValue?: string
    skuId?: string
    productPrice?: number | string
    number?: number
    total?: string
  }>
}>()

const { orderInfoData, shopListData } = toRefs(props)

const orderInfo = ref<Array<{ name: string; value: string; type: number | string; field: string }>>([])
const shopList = ref<Array<{ 
  image?: string
  productName?: string
  skuValue?: string
  skuId?: string
  productPrice?: number | string
  number?: number
  total?: string
}>>([])
const total = ref<string | number>(0)

// 初始化数据
orderInfo.value = orderInfoData.value
shopList.value = shopListData.value

// 计算总金额
if (shopList.value.length > 0) {
  const totalValue = shopList.value.reduce((sum, item) => {
    return sum + (item.total ? parseFloat(item.total) : 0)
  }, 0);
  total.value = typeof totalValue === 'number' ? totalValue.toFixed(2) : '0.00';
}
</script>

<style lang="scss" scoped>
.order_info_page {
  .detail_title {
    font-size: 20px;
    color: #333333;
    position: relative;
    margin: 30px 20px 20px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 5px;
      left: -20px;
      width: 4px;
      height: 20px;
      background-color: #3a68f2;
    }
  }

  .order_info {
    .order_list {
      padding-left: 20px;
      overflow: hidden;
      list-style: none;

      li {
        float: left;
        width: calc(100% / 2);
        margin-bottom: 20px;

        p {
          margin: 0;
          padding: 0;
          display: inline-block;
          font-size: 16px;
          color: #333333;

          &:nth-child(1) {
            margin-right: 20px;
          }

          &:nth-child(2) {
            color: #666666;
          }
        }
      }
    }
  }

  .after_sale_shop {
    .goods_list {
      padding-left: 20px;

      .good_details {
        border-bottom: 1px #e0e5eb solid;

        ul {
          overflow: hidden;
          display: flex;
          margin: 0;
          padding: 20px 0;
          font-size: 16px;

          li {
            flex: 3;
            display: flex;
            text-align: left;

            img {
              width: 80px;
              height: 80px;
              border-radius: 4px;
              font-size: 16px;
              color: #333333;
            }

            &:nth-child(2),
            &:nth-child(3) {
              display: block;
            }

            p {
              margin: 0;
              padding: 0;
              height: 25px;
              line-height: 25px;
            }
          }
        }
      }
    }

    .total {
      padding-left: 20px;

      ul {
        margin: 0;
        padding: 20px 0;
        display: flex;
        justify-content: flex-end;

        li {
          font-size: 16px;
          color: #333333;
          display: flex;
          width: 90px;

          &:nth-child(4) {
            margin-right: 140px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>